import React, {Component} from 'react';

const MyContext = React.createContext()

class A extends Component {
    state = {
        username: 'Tom',
        age: 18
    }

    render() {
        return (
            <div>
                <h4>我是A组件，我的用户名是：{this.state.username}</h4>
                <MyContext.Provider value={{...this.state}}>
                    <B/>
                </MyContext.Provider>
            </div>
        );
    }
}

class B extends Component {
    render() {
        return (
            <div>
                <h4>我是B组件</h4>
                <C/>
            </div>
        );
    }
}

// class C extends Component {
//     static contextType = MyContext
//
//     render() {
//         return (
//             <div>
//                 <h4>我是C组件，A组件的用户名是：{this.context.username},年龄：{this.context.age}</h4>
//             </div>
//         );
//     }
// }

function C() {
    return (
        <div>
            <h4>我是C组件，A组件的用户名是：
                <MyContext.Consumer>
                    {
                        value => {
                            return `${value.username},年龄：${value.age}`
                        }
                    }
                </MyContext.Consumer>
            </h4>
        </div>
    )
}

export default A;

